<template>
  <common-view>
    <div class="swiper mySwiper" ref="swiperEl">
        <div class="swiper-wrapper">
          <div :class="[{'swiper-slide': true, 'swiper-no-swiping': index >= 2}, `page-${index}`]"
              v-for="(page,index) in pages"
              :key="`page-${index}`">
            <component :is="page"
                      :id="index" @next-page="_changePage" @lock="onLock"></component>
        </div>
      </div>
    </div>
  </common-view>
</template>
<script>
import IndexView from '@/views/IndexView'
import DisplayWorksView from '@/views/DisplayWorksView'
import CustomizedWorkView from '@/views/CustomizedWorkView'
import ComposePictureView from '@/views/ComposePictureView'
import LotteryView from '@/views/LotteryView'
import MyStoryView from '@/views/MyStoryView'
import { UPDATE_CURRENT_PAGE } from '@/store/mutation-types'

export default {
  name: 'MainView',
  props: {
    currentPage: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      swiper: null,
      index: 0,
      pages: [
        IndexView,
        DisplayWorksView,
        CustomizedWorkView,
        ComposePictureView,
        LotteryView,
        MyStoryView
      ]
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // eslint-disable-next-line no-undef
      this.swiper = new Swiper(this.$refs.swiperEl, {
        direction: 'vertical',
        noSwiping: true,
        noSwipingClass: 'swiper-no-swiping',
        touchMoveStopPropagation: true,
        initialSlide: this.currentPage,
        virtual: {
          enabled: true
        },
        on: {
          transitionEnd: (swiper) => {
            const currentPage = swiper.activeIndex
            swiper.allowSlideNext = currentPage < 1
            currentPage === 4 && this.$store.dispatch(UPDATE_CURRENT_PAGE, currentPage)
          }
        }
      })
    },
    _onScrollEnd () {},
    _changePage () {
      if (this.swiper) {
        this.swiper.allowSlideNext = true
        this.swiper.slideNext()
      }
    },
    onLock (isLock) {
      isLock ? this.swiper.disable() : this.swiper.enable()
    }
  }
}
</script>
<style scoped lang="scss">
@import "../assets/css/mixin.scss";
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
</style>
